<template>
	<view v-if="pageData[0]" :style="{ '--color': pageData[0].iconColor || vuex_config.themeColor1 }">
		<view class="row" v-if="!parameter.layout || parameter.layout == 1">
			<view v-for="(item, index) of pageData" :key="index" class="item" @click="goAddDistri()">
				<view class="icon_box">
					<image v-if="item.image" class="icon" mode="aspectFill" :src="item.image" />
					<view v-else :class="['icon', 'iconfont', item.icon]"></view>
				</view>
				<view class="title">{{ !vuex_user.pk_id || vuex_user.type == 1 ? item.title : item.applyTitle }}</view>
				<view class="iconfont iconfont-e775 icon-you"></view>
			</view>
		</view>
		<view class="dist_main" v-else>
			<view class="distri-box" @click="goAddDistri()">
				<view class="box-left">
					<image class="db-img" src="../../../static/icon/ic_31.png" mode="aspectFill"></image>
					<text>注册团长享受更多权益</text>
				</view>
				<view class="box-right">{{ !vuex_user.pk_id || vuex_user.type == 1 ? '立即注册' : '审核中...' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { userTemplate } from './userTemplate.js';
export default {
	mixins: [userTemplate],
	components: {},
	data() {
		return {};
	},

	mounted() {},

	methods: {
		// 去申请分销商
		goAddDistri() {
			this.$login().then(()=>{
				if (this.vuex_user.type === 1) {
					this.$linkTo('/package/user/user-info/index?type=applyDist');
				} else if (this.vuex_user.type == 3) {
					uni.showModal({
						content: '审核中...',
						showCancel: false
					});
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
@import './index.scss';
.row {
	overflow: hidden;
	.item {
		background: #fff;
		margin-bottom: 1rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		&:last-of-type {
			margin-bottom: 1rpx;
		}
		.icon {
			margin-right: 20rpx;
			width: 40rpx;
			height: 40rpx;
			font-size: 38rpx;
			text-align: center;
			line-height: 40rpx;
			color: var(--color);
		}
		.title {
			flex: 1;
			overflow: hidden;
		}
		.icon-you {
			text-align: right;
			color: #999;
		}
	}
}
.dist_main{
	padding: 0 24rpx;
	.distri-box {
		height: 90rpx;
		background-image: url('http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202107/jhstest/56638336493008.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx 0 26rpx;
		.box-left {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #6a4714;
			.db-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 14rpx;
			}
		}
		.box-right {
			width: 160rpx;
			height: 52rpx;
			line-height: 52rpx;
			background-image: url('http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202107/jhstest/52143724718880.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #f0e1c9;
		}
	}
}
/* #ifdef MP-ALIPAY */
.u-reset-button {
	border:0;
	
}
 /*  #endif  */
</style>
